<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.4.3/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2493370_i3thttrf2n.css">
    <title>Document</title>
</head>
<body>
    <div class="movie">
        <div class="movie-head">
            <i class="iconfont icon--left-arrow-"></i>
            <span class="title">影片详情</span>
        </div>
        <div class="movie-info">
            <div class="movie-info__desc">
                <div class="info-pic">
                    <img src="https://p1.meituan.net/moviemachine/58732574fbc2f64c04c3e825c058da7f16742753.jpg@300w_414h_80q_1e_1c" alt="">
                </div>
                <div class="info-container">
                    <h2 class="name">哥斯拉大战金刚</h2>
                    <p class="en-name">Godzilla vs Kong
                    <p class="like">
                        <i class="iconfont icon-like"></i>
                        <span>两大怪兽之王,谁与争锋?</span>
                        <p class="type">
                            动作\冒险\科幻
                        </p>
                    </p>
                    <p class="play-time">2021-03-26 08:00 中国大陆上映</p>
                    <!-- btn -->
                    <div class="btn-wrap">
                        <div class="flex" id="watch">
                            <i class="iconfont icon-like1"></i>
                            想看
                        </div>
                        <div class="flex">
                            <i class="iconfont icon-wujiaoxingkong"></i>
                            看过
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="movie-info__rate">
                <div class="rate-title">
                    <div class="rate-title__left">
                        <i class="iconfont icon-maoyan"></i>
                        猫眼购票评分
                    </div>
                    <div class="rate-title__right">
                        <span class="want">506,799</span>人想看
                        <span class="watched">29,951,749</span>人看过
                        <i class="iconfont icon-arrow-right"></i>
                    </div>
                </div>
                <div class="rate-detail">
                    <div class="rate-detail__left">
                        <div class="grade">
                            <h2>8.9</h2>
                            <p><span class="">390,964</span>人评</p>
                        </div>
                       
                    </div>
                    <div class="rate-detail__right">
                        
                    </div>
                </div>
            </div>
            
        </div>


        <div id="toast" >
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">已标注为想看</p>
            </div>
        </div>

    </div>


<script>
    var watchBtn = document.getElementById('watch')
    var toast = document.getElementById('toast')        //弹出提示框
    var heart = document.querySelector('.icon-like1')
    var toastContent = document.querySelector('.weui-toast__content')
    var flag = false        /*第三方变量，记录是否想看，boole类型*/

    watchBtn.addEventListener('click',function(){

        flag =!flag/*前面加个感叹号，取反值*/
        toast.style.display ='block'
        var toastText;
        // if(flag){
            
        //     heart.style.color ='red'
        //     toastText='已标注为想看'
        //     // toastContent.innerHTML ='已标注为想看'
        // }else{
        //     toastText='已取消想看'
        //     // toastContent.innerHTML ='已取消想看'        /*改变dom里面的文本内容*/
        //     heart.style.color ='#fff'
        // }
        toastText =(flag ==true)?'已标注为想看':'已取消想看'
        heart.style.color =(flag ==true)?'red':'#fff'

        toastContent.innerHTML = toastText
        // heart.style.color =heartColor
        
        setTimeout(function(){
            toast.style.display ='none'
        },2000)
    })
</script>
</body>
</html>